{extend name="common/base"}
{block name="title"}会员管理{/block}
{block name="content"}
<style>
    .am-pagination a {cursor: pointer}
</style>
<!-- 内容区域 -->
<div class="tpl-content-wrapper">
    <div class="row-content am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title  am-cf">会员列表</div>


                    </div>
                    <div class="widget-body  am-fr">

                        <div class="am-u-sm-12 am-u-md-12 am-u-lg-4 am-u-lg-push-9">
                            <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                                <form action="?" method="get">
                                <input type="text" class="am-form-field " name="search">
                                <span class="am-input-group-btn">
                                <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search" type="submit"></button>
                                </span>
                                </form>
                            </div>
                        </div>
                        <div id="ajax_content">
                        <div class="am-u-sm-12">
                            <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black ">
                                <thead>
                                <tr>
                                    <th>会员姓名</th>
                                    <th>身份证</th>
                                    <th>手机号</th>
                                </tr>
                                </thead>
                                <tbody id="ajax_body">
                                {foreach name="adlist"  id="item"}
                                <tr class="gradeX">
                                    <td class="am-text-middle">{$item.real_name}</td>
                                    <td class="am-text-middle">{$item.idcard}</td>
                                    <td class="am-text-middle">{$item.phone}</td>
                                </tr>
                                {/foreach}
                                <!-- more data -->
                                </tbody>
                            </table>
                        </div>
                        <div class="am-u-lg-12 am-cf">

                            <div class="am-fr ajax-page">
                                {$page}
                                <!--<ul class="am-pagination tpl-pagination">-->
                                    <!--<li class="am-disabled"><a href="#">«</a></li>-->
                                    <!--<li class="am-active"><a href="#">1</a></li>-->
                                    <!--<li><a href="#">2</a></li>-->
                                    <!--<li><a href="#">3</a></li>-->
                                    <!--<li><a href="#">4</a></li>-->
                                    <!--<li><a href="#">5</a></li>-->
                                    <!--<li><a href="#">»</a></li>-->
                                <!--</ul>-->
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="footer-js"}
<script src="https://cdn.bootcss.com/template_js/0.7.1/template.min.js"></script>
<script type="text/html" id="ajax_page_content">
    <%for (var i = 0; i<data.length; i++){%>
    <tr class="gradeX">
        <td class="am-text-middle"><%:=data[i].real_name%></td>
        <td class="am-text-middle"><%:=data[i].idcard%></td>
        <td class="am-text-middle"><%:=data[i].phone%></td>
    </tr>
    <%}%>
</script>
<script>
    $(function () {
        $('.am-pagination a').each(function (){
            $(this).attr('ajaxhref' , $(this).attr('href'));
            $(this).removeAttr('href');
        })
        $('#ajax_content').on('click' , '.am-pagination a' , function () {
            var _this = $(this)
            $.ajax({
                type:'get',
                url:_this.attr('ajaxhref'),
                success:function (res) {
                    $('.ajax-page').html(res.page)
                    $('.am-pagination a').each(function (){
                        $(this).attr('ajaxhref' , $(this).attr('href'));
                        $(this).removeAttr('href')
                    })
                    var html = template(document.getElementById('ajax_page_content').innerHTML , {data : res.adlist.data})
                    console.log(html)
                    document.getElementById('ajax_body').innerHTML = html;
                }
            })
        })
    })
</script>
{/block}